<template>
  <div class="about">
    <h1>vue3的生命周期</h1>
    <div id="dom">{{msg}}</div>
    <button v-on:click="handleClick">clice me</button>
    <input type="text" placeholder="laiya" v-model="userName">
     <input type="text" placeholder="电话" v-model="userPhone"
     @focus="handleFocus"
     @blur="handleBlur"
     @input="handleInput">
    <textarea placeholder="yijian" cols="30" rows="10" v-model="userInput"></textarea>
    <p>{{userName}}-------{{userInput}}</p>
    <button @click="submit">提交</button>
  </div>>
</template>
<script>
import { reactive, toRefs,onBeforeMount,onMounted,onBeforeUpdate,onUpdated } from "vue"
export default {
  name:"about",
  setup() {
    const data =reactive({
      msg:"你好！",
      msg2:"你好2！",
      userName:"onLee",
      userInput:"",
      userPhone:""
    })

    onBeforeMount(()=>{
      console.log("onBeforeMount",document.querySelector("#dom"))
    })
    onMounted(()=>{
      console.log("onMounted",document.querySelector("#dom"))
      setTimeout(()=>{
        data.msg2="jiayou"
      },2000)
    })
     onBeforeUpdate(()=>{
      console.log("onBeforeUpdate",document.querySelector("#dom"))
    })
    onUpdated(()=>{
      console.log("onUpdated",document.querySelector("#dom"))
    })
    const handleClick=()=>{
      alert("早上好大小姐")
    }
    const submit=()=>{
      alert('${data.userName}haha')
    }
    const handleFocus=()=>{
      console.log("早上好大小姐handleFocus")
    }
    const handleBlur=()=>{
      console.log("早上好大小姐handleBlur")
      if(!data.userPhone){
        alert("手机号必填")
      }
    }
    const handleInput=()=>{
      if(!/^[1][3,4,5,6,7,8][0-9]{9}$/ .test(data.userPhone)){
        alert("手机号cuol")
      }
    }
    return{
      ...toRefs(data),
      handleClick,
      submit,
      handleFocus,
      handleBlur,
      handleInput
    }
    
  }
}
</script>

